<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/style/style.css">
<script src="${pageContext.request.contextPath}/static/script/index.js"></script>
<script src="${pageContext.request.contextPath}/static/script/button.js"></script>
<title>购物车</title>

</head>
<body>
	<nav class="aho-top-bar aho-box-shadow-mid">
		<section class="main">
			<span><a href="${pageContext.request.contextPath}">OnlineBookStore</a></span>
		</section>
		<section class="toolbar">
			<form action="search" method="GET" class="search-bar">
				<input type="text" placeholder="搜索图书" id="search-content" name="q" />
				<div id="search-btn" class="search-button">
					<svg style="width: 20px; height: 20px;" fill="none"
						stroke="currentColor" viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round"
							stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
				</div>
			</form>
		</section>
		<section class="toolbar">
			<c:if test="${account == null}">
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/login"> 登录 </a>
			</c:if>
			<c:if test="${account != null}">
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/profile">
					<svg style="width: 24px; height: 24px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					  <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
					</svg>
				</a>
				<a class="toolbar-action"
					href="${pageContext.request.contextPath}/shopping-cart"> <svg
						style="width: 24px; height: 24px;" fill="none"
						stroke="currentColor" viewBox="0 0 24 24"
						xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round"
							stroke-width="2"
							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
				</a>
				<a href="${pageContext.request.contextPath}/logout"
					class="toolbar-action"> <span
					class="aho-icon aho-icon-logout"></span>
				</a>
			</c:if>
		</section>

	</nav>
	<main class="center big-width flex-page flex-column">

		<div class="cart-thead">
			<div class="box2 item-head cart-table-head">
				<p>商品</p>
			</div>
			<div class="box1 cart-table-head">
				<p>单价</p>
			</div>
			<div class="box1 cart-table-head">
				<p>数量</p>
			</div>
			<div class="box1 cart-table-head">
				<p>小计</p>
			</div>
			<div class="box1 cart-table-head">
				<p>操作</p>
			</div>
		</div>
		<c:set var="total" scope="page" value="${0}" />
		<c:forEach items="${items}" var="item">
			<div class="item-cart">
				<div class="box2 item-head">
					<img class="item-img"
						src="${pageContext.request.contextPath}/static/imgs/${item.bookId}.png"
						alt="" srcset="">
					<div>
						<h3><a href="${pageContext.request.contextPath}/book/${item.bookId}">${item.title}</a></h3>
						<p>${item.author}著</p>
						<p>${item.publisher}</p>
					</div>
				</div>
				<div class="box1">
					<p>${item.price}</p>
				</div>
				<div class="box1">
					<p>${item.amount}</p>
				</div>
				<div class="box1">
					<p>${item.amount*item.price}</p>
					<c:set var="total" scope="page"
						value="${item.amount*item.price + total}" />
				</div>
				<div class="box1">
					<button data-id="${item.bookId}" class="del-btn">
						<svg style="width: 20px; color: red;"
							xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
							viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					  <path stroke-linecap="round" stroke-linejoin="round"
								d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
					</svg>
					</button>
				</div>
			</div>
		</c:forEach>
		<div class="div-hr"></div>
		<div>
			<p style="text-align: end; font-weight: 600;">
				总计：<span class="hightlight">${total}</span>
			</p>
		</div>

		<div class="tools" style="background-color: #efefef;">

			<button style="margin-left: auto;"
				class="simple-bt <c:if test="${items.size() == 0}">bt-disable</c:if>"
				id="new">
				<svg xmlns="http://www.w3.org/2000/svg" class="tools-icon"
					height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF">
					<path d="M0 0h24v24H0V0z" fill="none" />
					<path
						d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z" /></svg>
				<span>提交订单</span>
			</button>

		</div>

	</main>
	<form action="shopping-cart/delete" method="POST" id="delBookForm">
		<input type="hidden" id="delbookid" name="bookId" />
	</form>
	<form id="sumbitOrder" action="order" method="POST">
		<input type="hidden" name="userId" value="${account.id}" />
	</form>


	<script>
    	var btnSearch = document.getElementById("search-btn");
		var inputContent = document.getElementById("search-content");
		btnSearch.addEventListener("click", function(e) {
			if (inputContent.value == '') {
				return;
			}
			window.open("${pageContext.request.contextPath}/search?q=" + encodeURI(inputContent.value), "_self");
		});
		<c:if test="${items.size() > 0}">
		var bookIdInput = document.getElementById("delbookid");
		var delForm = document.getElementById("delBookForm");
		var orderForm = document.getElementById("sumbitOrder");
		console.log(bookIdInput);
		document.getElementById("new").addEventListener("click", (_) => {orderForm.submit()});
		document.querySelectorAll("button.del-btn").forEach((e) => {
			e.addEventListener('click',(_)=>{
				bookIdInput.value = e.getAttribute('data-id');
				delForm.submit();
			});
		});
		</c:if>
    </script>
	<c:if test="${message != null}">
		<script type="text/javascript">
	    	alert("${message}");
	    </script>
	</c:if>
</body>
</html>